<template>
  <div class="wrap">
    <el-button size="mini" @click="handleDetail(order)">详情</el-button>

    <OrderDetail v-if = "orderDetail" :visible.sync = "dialogDetailVisible" :orderDetail = "orderDetail" />
  </div>
</template>

<script>
import { orderGetById } from '@/api/mall'
import OrderDetail from '@/views/mall/order/components/OrderDetail.vue'

export default {
  name: 'OrderDetailButton',
  props: {
    order: {
      type: Object,
      default: () => ({})
    },
  },
  components: {
    OrderDetail
  },
  data() {
    return {
      dialogDetailVisible: false,
      orderDetail: {
        type: Object,
        default: () => ({})
      },
    }
  },
  computed: {},
  watch: {},
  methods: {
    handleDetail(row) {
      orderGetById({ id: row.id }).then(res => {
        this.orderDetail = Object.assign({}, res)
        this.dialogDetailVisible = true;
      }).catch(err => {
        console.log(err)
      })
    },
  },
  created() {
    
  },
  mounted() {
    
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style lang='scss' scoped>
  .wrap {
    display: inline-block;
    text-align: left;
  }
</style>